<template>
  <div class="orders">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container">
      <!-- 搜索 -->
      <div class="searchbox">
        <el-input v-model="queryInfo.query" placeholder="请输入内容" class="input-with-select">
          <template #append>
            <el-button @click="search">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
      <!-- 表格主体 -->
      <el-table :data="OrdersList" style="width: 100%" border stripe size="large">
        <el-table-column prop="index" label="#" width="50" />
        <el-table-column prop="number" label="订单编号" />
        <el-table-column prop="price" label="订单价格" />
        <el-table-column prop="pay" label="是否付款">
          <template #default="scope">
            <el-tag
              class="ml-2"
              :type="payFilter[scope.row.pay].type"
            >{{payFilter[scope.row.pay].is_send}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deliver" label="是否发货" />
        <el-table-column prop="time" label="下单时间" />
        <el-table-column prop="operation" label="操作">
          <template #default="scope">
            <!-- 编辑按钮 -->
            <el-button type="primary" @click="edit(scope.row)">
              <el-icon>
                <EditPen />
              </el-icon>
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="success" @click="deleteThere(scope.row)">
              <el-icon>
                <Location />
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->

      <div class="pagination">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="queryInfo.pagenum"
            v-model:page-size="queryInfo.pagesize"
            :page-sizes="[ 5, 10, 15]"
            layout="total,sizes, prev, pager, next, jumper"
            :total="totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
      <!-- 编辑对话框 -->
      <el-dialog v-model="editVisible" title="修改用户信息">
        <el-form
          :model="editFrom"
          :label-width="100"
          class="demo-ruleForm"
          :rules="addrules"
          ref="editFromref"
        >
          <el-form-item label="省市区/县" prop="address">
            <el-cascader
              placeholder="请选择地址"
              v-model="editFrom.address"
              :options="areatada"
              style="width:100%;"
              :props="cateProps"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressopertion">
            <el-input v-model="editFrom.addressopertion" type="text" />
          </el-form-item>
          <el-form-item label-width="770">
            <el-button @click="editVisible = false">取消</el-button>
            <el-button type="primary" @click="editThere(editFromref)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import areatada from "../tools/address.js";
import { reactive, ref, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { DateFilter, payFilter } from "../tools/filiter";
import { getOrdersList } from "../tools/ajax.js";
const route = useRoute();
const router = useRouter();
const cateProps = {
  expandTrigger: "hover",
  label: "label",
  value: "value",
  children: "children",
  emitPath: false
};
const editFromref = reactive({});
const OrdersList = reactive([]);
const editVisible = ref(false);
const editFrom = reactive({
  address: "",
  addressopertion: ""
});
const queryInfo = reactive({
  query: "",
  // 当前页数
  pagenum: 1,
  // 每页显示多少数据
  pagesize: 10
});
const totals = ref(0);

const addrules = {
  address: [
    {
      required: true,
      message: "省市地址不能为空",
      trigger: "change"
    }
  ],
  addressopertion: [
    {
      required: true,
      message: "详细地址不能为空",
      trigger: "change"
    }
  ]
};
function getlist() {
  getOrdersList({ params: queryInfo }).then(res => {
    console.log(res.data);
    totals.value = res.data.total;
    OrdersList.splice(0, 1000);
    res.data.goods.forEach((item, index) => {
      OrdersList.push({
        index: index + 1,
        number: item.order_number,
        price: item.order_price,
        pay: item.pay_status,
        deliver: item.is_send,
        time: DateFilter(item.update_time),
        id: item.order_id
      });
    });
  });
}
// 修改用户状态
function toAddGoods() {
  router.push("/goods/all");
}
function handleSizeChange() {
  console.log("每页条数改变了");
  getlist();
}
function handleCurrentChange() {
  console.log("翻页了");
  getlist();
}
function search() {
  console.log("搜索执行了");
  getlist();
}

// 编辑信息
function editThere(from) {
  console.log(editFrom);
  from.validate(flag => {
    if (flag) {
      ElMessage.success("修改地址成功");
      editVisible.value = false;
      getlist();
    } else {
      return;
    }
  });
}
function edit(item) {
  console.log(item);
  editVisible.value = true;
}

// 删除商品
function deleteThere(item) {
  ElMessageBox.confirm("定位没用,惊不惊喜,意不意外?", "提示", {
    confirmButtonText: "惊喜",
    cancelButtonText: "意外",
    type: "error"
  })
    .then(() => {
      ElMessage.success("惊喜就对了!");
    })
    .catch(() => {
      ElMessage.warning("意外就对了!");
    });
}
onBeforeMount(() => {
  getlist();
});
</script>

<style scoped>
.searchbox {
  margin-bottom: 20px;
  display: flex;
}
.pagination {
  margin-top: 20px;
}
.input-with-select {
  width: 400px;
  height: 40px;
}
.searchbox > .el-button.el-button--primary {
  height: 40px;
  margin-left: 30px;
}
.cell {
  font-size: 12px !important;
}
.el-input__wrapper {
  width: 100%;
}
</style>